﻿@using xConnected.Common.ExpertProfile
@using xConnected.Common.Project
@using xConnected.Core.Model
<div class="row-fluid" style="margin-bottom: 20px;">
    <div class="span3">
        <span style="font-size: x-large;">My Expert Profiles</span>
    </div>
    <div class="span2 pull-right">
        <a class="btn btn-info" data-bind="click: function() { $root.profile.selectNew(); }, tooltip: {title: '@Resources.Createnewprofilesmall', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">Create new <i class="icon-plus icon-white"></i></a>
    </div>
</div>
<div data-bind="with: profile">
    <ul class="unstyled" data-bind="foreach: profiles">
        <li>
            <div class="thumbnail breadcrumb row">
                <div class="span1" align="left" style="width: 50px;">
                    <img class="img-rounded" data-bind="attr: {src: $data.Photo50X50()}" alt="Profile photo">
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;">
                    <span style="font-size: large" data-bind="text: Title"></span>
                </div>
                <div class="span3" style="margin-top: 10px; width: 180px;">
                    <span data-bind="text: DescriptionShort"></span>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Country">
                    <small style="font-weight: bold;">Country: </small><small data-bind="text: Description"></small>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Industry">
                    <small style="font-weight: bold;">Industry: </small><small data-bind="text: Description"></small>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;">
                    <small style="font-weight: bold;">Categories: </small>
                    <span data-bind="foreach: CategorySkills">
                        <small data-bind="text: CategoryName"></small>,
                    </span>
                </div>
                <div class="span2"  style="margin-top: 10px; width: 140px;">
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.profile.selectDetails($data); }, tooltip: {title: 'View details', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-zoom-in"></i>
                    </a>
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.profile.selectEdit($data); }, tooltip: {title: 'Edit profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-pencil"></i>
                    </a>
                    <a class="btn btn-mini" data-toggle="modal" href="#DeleteDialog" data-bind="click: function() { $root.profile.select($data); }, tooltip: {title: 'Delete profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-trash"></i>
                    </a>
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.profile.setAsDefault($data); }, tooltip: {title: 'Set this profile as default profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i data-bind="css:{'icon-user': $data.IsDefault() == true, 'icon-user icon-white': $data.IsDefault() == false}"></i>
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>
<a href="#" data-bind="visible: $root.profile.profiles().length <= 3, click: function(){ $root.profile.showAllMyExperts();}">
    <span>Show all expert profiles </span>
    <i class="icon-chevron-down"></i>
</a>
<a href="#" data-bind="visible: $root.profile.profiles().length > 3, click: function(){ $root.profile.showLessMyExperts();}">
    <span>Show less expert profiles </span>
     <i class="icon-chevron-up"></i>
</a>
<hr/>
<div class="row-fluid" style="margin-bottom: 20px;">
    <div class="span3">
        <span style="font-size: x-large;">My Company Profiles</span>
    </div>
    <div class="span2 pull-right">
        <a class="btn btn-info" data-bind="click: function() { $root.company.selectNew(); }, tooltip: {title: '@Resources.Createnewprofilesmall', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">Create new <i class="icon-plus icon-white"></i></a>
    </div>
</div>
<div data-bind="with: company">
    <ul class="unstyled" data-bind="foreach: companies">
        <li>
            <div class="thumbnail breadcrumb row">
                <div class="span1" align="left" style="width: 50px;">
                    <img class="img-rounded" data-bind="attr: {src: $data.Photo50X50()}" alt="Logo">
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;">
                    <span style="font-size: large" data-bind="text: Title"></span>
                </div>
                <div class="span3" style="margin-top: 10px; width: 180px;">
                    <span data-bind="text: DescriptionShort"></span>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Country">
                    <small style="font-weight: bold;">Country: </small><small data-bind="text: Description"></small>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Industry">
                    <small style="font-weight: bold;">Industry: </small><small data-bind="text: Description"></small>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;">
                    <small style="font-weight: bold;">Categories: </small>
                    <span data-bind="foreach: Categories">
                        <small data-bind="text: Description"></small>,
                    </span>
                </div>
                <div class="span2"  style="margin-top: 10px; width: 140px;">
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.company.selectDetails($data); }, tooltip: {title: 'View details', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-zoom-in"></i>
                    </a>
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.company.selectEdit($data); }, tooltip: {title: 'Edit profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-pencil"></i>
                    </a>
                    <a class="btn btn-mini" data-toggle="modal" href="#DeleteCompanyDialog" data-bind="click: function() { $root.company.select($data); }, tooltip: {title: 'Delete profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-trash"></i>
                    </a>
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.company.setAsDefault($data); }, tooltip: {title: 'Set this profile as default profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i data-bind="css:{'icon-user': $data.IsDefault() == true, 'icon-user icon-white': $data.IsDefault() == false}"></i>
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>
<a href="#" data-bind="visible: $root.company.companies().length <= 3, click: function(){ $root.company.showAllMyCompanies();}">
    <span>Show all company profiles </span>
    <i class="icon-chevron-down"></i>
</a>
<a href="#" data-bind="visible: $root.company.companies().length > 3, click: function(){ $root.company.showLessMyCompanies();}">
    <span>Show less company profiles </span>
     <i class="icon-chevron-up"></i>
</a>
<hr/>
<div class="row-fluid" style="margin-bottom: 20px;">
    <div class="span3">
        <span style="font-size: x-large;">My Positions/Projects</span>
    </div>
    <div class="span2 pull-right">
        <a class="btn btn-info" data-bind="click: function() { $root.position.selectNew(); }, tooltip: {title: '@ProjectRes.CreateProject', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">Create new <i class="icon-plus icon-white"></i></a>
    </div>
</div>
<div data-bind="with: position">
    <ul class="unstyled" data-bind="foreach: positions">
        <li>
            <div class="thumbnail breadcrumb row">
                <div class="span1" align="left" style="width: 50px;">
                    <img class="img-rounded" data-bind="attr: {src: $data.Photo50X50()}" alt="Logo">
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;">
                    <span style="font-size: large" data-bind="text: Title"></span>
                </div>
                <div class="span3" style="margin-top: 10px; width: 180px;">
                    <span data-bind="text: Description"></span>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Country">
                    <small style="font-weight: bold;">Country: </small><small data-bind="text: Description"></small>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;" data-bind="with:Industry">
                    <small style="font-weight: bold;">Industry: </small><small data-bind="text: Description"></small>
                </div>
                <div class="span2" style="margin-top: 10px; width: 150px;">
                    <small style="font-weight: bold;">Categories: </small>
                    <span data-bind="foreach: Categories">
                        <small data-bind="text: Description"></small>,
                    </span>
                </div>
                <div class="span2"  style="margin-top: 10px; width: 140px;">
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.selectDetails($data); }, tooltip: {title: 'View details', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-zoom-in"></i>
                    </a>
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.selectEdit($data); }, tooltip: {title: 'Edit profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-pencil"></i>
                    </a>
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.select($data); }, tooltip: {title: 'Delete profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i class="icon-trash"></i>
                    </a>
                    <a class="btn btn-mini" href="#" data-bind="click: function() { $root.position.setAsDefault($data); }, tooltip: {title: 'Set this profile as default profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                        <i data-bind="css:{'icon-user': $data.IsDefault() == true, 'icon-user icon-white': $data.IsDefault() == false}"></i>
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>
<a href="#" data-bind="visible: $root.position.positions().length <= 3, click: function(){ $root.position.showAllMyPositions();}">
    <span>Show all positions/projects </span>
    <i class="icon-chevron-down"></i>
</a>
<a href="#" data-bind="visible: $root.position.positions().length > 3, click: function(){ $root.position.showLessMyPositions();}">
    <span>Show less positions/projects </span>
     <i class="icon-chevron-up"></i>
</a>